<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryForm"
			:model="queryParams"
			:inline="true"
			label-width="90px"
			@submit.native.prevent
		>
			<el-form-item :label="$t('equipment.channelName')" prop="name">
				<el-input
					v-model="queryParams.name"
					:placeholder="$t('equipment.channelNameInput')"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>{{ $t('elButton.search') }}
				</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
					$t('elButton.reset')
				}}</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="20">
			<el-col :span="24" :xs="24">
				<!--左上角按钮-->
				<el-row :gutter="10">
					<el-col :span="1.5">
						<el-button
							v-hasPerm="['scheduling_release']"
							type="primary"
							icon="el-icon-plus"
							size="mini"
							@click="handleAdd"
							>{{ $t('elButton.add') }}
						</el-button>
						<el-button
							v-hasPerm="['scheduling_del']"
							type="danger"
							icon="el-icon-delete"
							size="mini"
							:disabled="multiple"
							@click="handleDel"
							>{{ $t('elButton.delete') }}
						</el-button>
					</el-col>
					<div class="top-right-btn">
						<el-tooltip
							class="item"
							effect="dark"
							:content="$t('elButton.refresh')"
							placement="top"
						>
							<el-button
								size="mini"
								circle
								icon="el-icon-refresh"
								@click="getList"
							/>
						</el-tooltip>
						<el-tooltip
							class="item"
							effect="dark"
							:content="
								showSearch
									? $t('elButton.hideSearch')
									: $t('elButton.showSearch')
							"
							placement="top"
						>
							<el-button
								size="mini"
								circle
								icon="el-icon-search"
								@click="showSearch = !showSearch"
							/>
						</el-tooltip>
					</div>
				</el-row>

				<el-table
					v-loading="loading"
					:data="schedulingList"
					@selection-change="handleSelectionChange"
				>
					<el-table-column type="selection" width="55" align="center" />
					<el-table-column
						:label="$t('equipment.channelName')"
						align="center"
						prop="name"
						:show-overflow-tooltip="true"
					/>
					<el-table-column
						:label="$t('equipment.channelPlayWeek')"
						align="center"
						prop="playWeeks"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<span>{{ playWeeksChange(scope.row.playWeeks) }}</span>
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('equipment.channelPlayDate')"
						align="center"
						prop="startDate"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<span>{{
								`${parseTime(scope.row.startDate, '{y}-{m}-{d}')}` +
									$t('untils') +
									`${parseTime(scope.row.stopDate, '{y}-{m}-{d}')}`
							}}</span>
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('equipment.channelPlayTime')"
						align="center"
						prop="startTime"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<span>{{
								`${scope.row.startTime}` +
									$t('untils') +
									`${scope.row.stopTime}`
							}}</span>
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('equipment.terminal')"
						align="center"
						prop="equipmentNum"
					>
						<template slot-scope="scope">
							<el-tag
								style="cursor:pointer"
								@click="choiceDeviceOpen(scope.row.id)"
								>{{ scope.row.equipmentNum }}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column
						:label="$t('equipment.user')"
						align="center"
						prop="createBy"
					/>
					<el-table-column
						:label="$t('elButton.updateTime')"
						align="center"
						prop="updateTime"
						:show-overflow-tooltip="true"
					>
						<template slot-scope="scope">
							<span>{{ parseTime(scope.row.updateTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column
						width="220px"
						:label="$t('equipment.control')"
						align="center"
						class-name="small-padding fixed-width"
						fixed="right"
					>
						<template slot-scope="scope">
							<el-button
								v-if="scope.row.status != 4"
								v-hasPerm="['scheduling_release']"
								size="mini"
								type="text"
								icon="el-icon-refresh"
								@click="release(scope.row, 1)"
								>{{ $t('equipment.release') }}
							</el-button>
							<el-button
								v-if="scope.row.status == 4"
								v-hasPerm="['scheduling_release']"
								size="mini"
								type="text"
								icon="el-icon-refresh"
								@click="release(scope.row, 2)"
								>{{ $t('equipment.resetRelease') }}
							</el-button>
							<el-button
								v-hasPerm="['scheduling_release']"
								size="mini"
								type="text"
								icon="el-icon-edit"
								@click="handleEdit(scope.row)"
								>{{ $t('elButton.edit') }}
							</el-button>
							<el-button
								v-hasPerm="['scheduling_del']"
								size="mini"
								type="text"
								icon="el-icon-delete"
								@click="handleDel(scope.row)"
								>{{ $t('elButton.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<pagination
					v-show="total > 0"
					:total="total"
					:page.sync="queryParams.current"
					:limit.sync="queryParams.size"
					@pagination="getList"
				/>
			</el-col>
		</el-row>

		<!-- 已选设备 -->
		<el-dialog
			:title="title"
			:visible.sync="choiceDeviceFlag"
			:modal-append-to-body="true"
			:append-to-body="true"
			fullscreen
		>
			<el-table
				v-loading="loading"
				:data="deviceList"
				max-height="70vh"
				:row-key="getRowKeys"
				:expand-row-keys="expands"
				@expand-change="expandChange"
			>
				<el-table-column type="expand">
					<el-table v-loading="loading" :data="downloadList">
						<el-table-column
							:label="$t('program.programNumber')"
							align="center"
							prop="programId"
						/>
						<el-table-column
							:label="$t('equipment.programName')"
							align="center"
							prop="programName"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							:label="$t('equipment.channelMode')"
							align="center"
							prop="playMode"
						>
							<template slot-scope="prop">
								<el-tag v-if="prop.row.playMode == '0'" type="info">{{
									$t('equipment.channelMode1')
								}}</el-tag>
								<el-tag v-if="prop.row.playMode == '1'" type="success">{{
									$t('equipment.channelMode2')
								}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column
							:label="$t('program.playTime')"
							align="center"
							prop="duration"
						/>
						<el-table-column
							:label="$t('program.distributionTimes')"
							align="center"
							prop="dloadTimes"
						/>
						<el-table-column
							:label="$t('program.distributionStatus')"
							align="center"
							prop="status"
							:formatter="statusFormat"
						/>
						<el-table-column
							:label="$t('equipment.remarks')"
							align="center"
							prop="remarks"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							:label="$t('equipment.control')"
							align="center"
							class-name="small-padding fixed-width"
						>
							<template slot-scope="scope">
								<div>
									<el-button
										v-hasPerm="['download_resend']"
										type="text"
										icon="el-icon-s-promotion"
										size="mini"
										@click="handleResend(scope.row)"
										>{{ $t('edition.reissue') }}
									</el-button>
								</div>
								<div>
									<el-button
										v-hasPerm="['download_progress']"
										size="mini"
										type="text"
										icon="el-icon-download"
										@click="handleProgress(scope.row)"
										>{{ $t('edition.downLoadProgress') }}
									</el-button>
								</div>
								<div>
									<el-button
										v-hasPerm="['download_del']"
										size="mini"
										type="text"
										icon="el-icon-delete"
										@click="handleDel(scope.row)"
										>{{ $t('elButton.delete') }}
									</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</el-table-column>
				<el-table-column
					:label="$t('equipment.name')"
					align="center"
					prop="name"
				/>
				<el-table-column
					:label="$t('equipment.sort')"
					align="center"
					prop="groupName"
				/>
				<el-table-column
					:label="$t('equipment.resolving')"
					align="center"
					prop="resolution"
				/>
				<el-table-column
					:label="$t('equipment.onlineStatus')"
					align="center"
					prop="online"
				>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.online === '0'" type="danger">{{
							$t('equipment.isUnderline')
						}}</el-tag>
						<el-tag v-if="scope.row.online === '1'" type="success">{{
							$t('equipment.isOnline')
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
					:label="$t('equipment.control')"
					align="center"
					class-name="small-padding fixed-width"
				>
					<template slot-scope="scope">
						<div>
							<el-button
								v-hasPerm="['download_resend']"
								type="text"
								icon="el-icon-s-promotion"
								size="mini"
								@click="handleResends(scope.row)"
								>{{ $t('edition.reissue') }}
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<!-- 下载进度对话框 -->
		<el-dialog
			:title="$t('edition.downLoadProgress')"
			class="dialog"
			:visible.sync="dOpen"
			:modal-append-to-body="true"
			:append-to-body="true"
		>
			<el-row :gutter="10">
				<el-col :span="24" style="margin-bottom: 10px;">
					<div class="top-right-btn">
						<el-tooltip
							class="item"
							effect="dark"
							:content="$t('elButton.refresh')"
							placement="top"
						>
							<el-button
								size="mini"
								circle
								icon="el-icon-refresh"
								@click="getResDload"
							/>
						</el-tooltip>
					</div>
				</el-col>
				<el-col :span="24" style="margin-bottom: 10px;">
					<el-table
						v-loading="loadingP"
						:data="resDloadList"
						style="width: 100%"
						:border="true"
						:stripe="true"
					>
						<el-table-column
							:label="$t('equipment.number')"
							align="center"
							prop="id"
						/>
						<el-table-column
							:label="$t('program.programNumber')"
							align="center"
							prop="programId"
						/>
						<el-table-column
							:label="$t('edition.materialNumber')"
							align="center"
							prop="materialId"
						/>
						<el-table-column
							:label="$t('equipment.identification')"
							align="center"
							prop="deviceCode"
							:show-overflow-tooltip="true"
						/>
						<el-table-column
							:label="$t('edition.downLoadNumber')"
							align="center"
							prop="dloadTimes"
						/>
						<el-table-column
							:label="$t('edition.downLoadProgress')"
							align="center"
							prop="dloadProgress"
						/>
						<el-table-column
							:label="$t('program.status')"
							align="center"
							prop="status"
						>
							<template slot-scope="scope">
								<el-tag v-if="scope.row.status == '0'" type="warning">{{
									$t('edition.downLoadStatus1')
								}}</el-tag>
								<el-tag v-if="scope.row.status == '1'" type="success">{{
									$t('edition.downLoadStatus2')
								}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column
							:label="$t('equipment.updateTime')"
							align="center"
							prop="updateTime"
							width="180"
							:show-overflow-tooltip="true"
						>
							<template slot-scope="scope">
								<span>{{ parseTime(scope.row.updateTime) }}</span>
							</template>
						</el-table-column>
					</el-table>
				</el-col>
			</el-row>
		</el-dialog>

		<!-- 添加或修改设备对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			:modal-append-to-body="true"
			:append-to-body="true"
			:close-on-click-modal="false"
		>
			<div>
				<template>
					<div style="text-align: left;">
						<span>{{ $t('wel.channel.title1') }}：</span>
						<el-select
							v-model="form.id"
							:placeholder="$t('wel.channel.title1Input')"
							:disabled="editBtn"
							filterable
						>
							<el-option
								v-for="item in schedulingIdOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</div>
				</template>
				<el-container>
					<el-main>
						<div class="box" style="margin-top: 20px;">
							<div class="left">
								<div class="title">{{ $t('edition.groupInformation') }}</div>
								<div class="head-container">
									<el-input
										v-model="name"
										:placeholder="$t('equipment.groupingInput')"
										clearable
										size="small"
										prefix-icon="el-icon-search"
										style="margin-bottom: 10px"
									/>
								</div>
								<div
									class="head-container"
									style="height: calc(55vh - 94px); overflow-y:auto;"
								>
									<el-tree
										ref="tree"
										:data="groupOptions"
										:props="defaultProps"
										node-key="id"
										:expand-on-click-node="false"
										:highlight-current="true"
										default-expand-all
										:filter-node-method="filterNode"
										@node-click="handleNodeClick"
									>
										<div
											slot-scope="{ node, data }"
											class="el-tree-node__label custom-tree-node custom-tree-item"
										>
											<span class="name">{{ data.name }}</span>
										</div>
									</el-tree>
								</div>
							</div>
							<div class="right">
								<div class="title">
									{{ $t('wel.event.equipment') }}
									<el-checkbox v-model="checkAll" @change="handleCheckAllChange"
										>全选</el-checkbox
									>
								</div>
								<div style="height:calc(55vh - 37px); overflow-y:auto;">
									<el-checkbox-group
										v-model="form.deviceId"
										style="padding:5px;"
										@change="handleCheckedChange"
									>
										<el-checkbox
											v-for="item in deviceList"
											:key="item.id"
											:label="item.id"
										>
											<el-tag v-if="item.online === '0'" type="danger">{{
												$t('equipment.isUnderline')
											}}</el-tag>
											<el-tag v-if="item.online === '1'" type="success">{{
												$t('equipment.isOnline')
											}}</el-tag>
											{{
												item.name +
													'--' +
													$t('equipment.resolving') +
													'：' +
													item.resolution
											}}
										</el-checkbox>
									</el-checkbox-group>
								</div>
							</div>
							<div class="right">
								<div class="title">{{ $t('equipment.hasClickEquipment') }}</div>
								<div style="height:calc(55vh - 37px); overflow-y:auto;">
									<el-checkbox-group
										v-model="form.deviceId"
										style="padding:5px;"
										@change="handleCheckedAlreadyChange"
									>
										<el-checkbox
											v-for="item in form.devices"
											:key="item.id"
											:label="item.id"
										>
											<el-tag v-if="item.online === '0'" type="danger">{{
												$t('equipment.isUnderline')
											}}</el-tag>
											<el-tag v-if="item.online === '1'" type="success">{{
												$t('equipment.isOnline')
											}}</el-tag>
											{{
												item.name +
													'--' +
													$t('equipment.resolving') +
													'：' +
													item.resolution
											}}
										</el-checkbox>
									</el-checkbox-group>
								</div>
							</div>
						</div>
					</el-main>
				</el-container>
				<div style="text-align: right;margin-top: 20px;">
					<el-button @click="cancel">{{ $t('cancelText') }}</el-button>
					<el-button type="primary" @click="confirmForm">{{
						$t('submitText')
					}}</el-button>
					<el-button v-if="form.status != 4" type="primary" @click="release">{{
						$t('equipment.release')
					}}</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// 发布计划
import { listDownload, resend } from '@/api/ips/download'
import { resDloadList } from '@/api/ips/resDload'
import {
	listDeviceScheduling,
	listDeviceSchedulingChoice,
} from '@/api/ips/device'
import {
	listScheduling,
	getScheduling,
	editReleaseScheduling,
	cancelReleaseScheduling,
} from '@/api/ips/scheduling'
import { groupTree } from '@/api/ips/group'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
	name: 'ReleasePlan',
	data() {
		return {
			ids: [], // 多选选中数组
			multiple: true, // 非多个禁用
			loading: true, // 遮罩层
			loadingP: true,
			editBtn: true, // 是否编辑
			dOpen: false, // 下载进度
			total: 0, // 总数量
			schedulingList: [], // 发布计划数据列表
			// 节目下载表格数据
			downloadList: [],
			// 下载状态字典
			statusOptions: [],
			expands: [],
			getRowKeys(row) {
				return row.id
			},
			resDloadList: [],
			dloadId: undefined,
			schedulingId: '',
			// 发布计划查询参数
			queryParams: {
				current: 1,
				status: '4,5',
				size: 10,
			},
			// 可发布计划查询参数
			optionsParams: {
				current: 1,
				// status: 2,
				size: 999999,
			},
			// 设备查询参数
			queryParamsDevice: {
				// current: 1,
				// size: 999999,
				// status: 1,
				id: undefined,
				fullPathId: undefined,
			},
			downloadQueryParams: {},
			deviceList: [], // 设备表格数据
			groupOptions: [], // 分组列表
			schedulingIdOptions: [], // 审核通过待发布频道
			name: undefined, // 分组名称
			defaultProps: {
				children: 'children',
				label: 'name',
			},
			title: '', // 弹出层标题
			open: false, // 是否显示弹出层
			choiceDeviceFlag: false, // 是否显示设备列表弹出层
			showSearch: true, // 显示搜索条件
			form: {
				// 表单参数
				id: undefined,
				deviceId: [],
				devices: [],
				status: 2,
			},
			deviceCode: '',
			checkAll: false,
		}
	},
	created() {
		this.getList()
		this.getGroupTree()
		this.getDicts('send_status').then((response) => {
			this.statusOptions = response.data
		})
	},
	watch: {
		name(val) {
			this.$refs.tree.filter(val)
		},
	},
	mounted() {},
	methods: {
		// 查询分组
		filterNode(value, data) {
			if (!value) return true
			return data.name.indexOf(value) !== -1
		},
		/** 查询发布计划列表 */
		getList() {
			this.loading = true
			listScheduling(this.queryParams).then((response) => {
				this.schedulingList = []
				response.data.forEach((element) => {
					if (element.deviceId) {
						element.equipmentNum = element.deviceId.split(',').length
					} else {
						element.equipmentNum = 0
					}
					this.schedulingList.push(element)
				})
				this.total = response.total
				this.loading = false
			})
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.id)
			this.multiple = !selection.length
		},
		// 表单重置
		reset() {
      this.name = ""
      this.checkAll = false
			this.form = {
				id: undefined,
				deviceId: [],
				devices: [],
				status: 2,
			}
			this.deviceList = []
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.current = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm')
			this.handleQuery()
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.form.status = 2
			this.getSchedulingIdOptions()
			this.editBtn = false
			this.open = true
			this.title = this.$t('terminal.addPlan')
		},
		/** 修改按钮操作 */
		handleEdit(row) {
			this.reset()
			const id = row.id
			this.editBtn = true
			this.form.status = row.status
			getScheduling(id).then((response) => {
				this.schedulingIdOptions.push({
					id: response.data.id,
					name: response.data.name,
				})
				this.title = this.$t('terminal.changePlan')
				this.form.id = id
				if (response.data.devices) {
					this.form.devices = JSON.parse(response.data.devices)
				}
				if (response.data.deviceId) {
					const tmp = response.data.deviceId.split(',')
					tmp.forEach((element) => {
						this.form.deviceId.push(Number(element))
					})
				}
				this.open = true
			})
		},
		/** 删除按钮操作 */
		handleDel(row) {
			const ids = row.id || this.ids
			this.$confirm(this.$t('terminal.enterDelete'), this.$t('tip'), {
				confirmButtonText: this.$t('submitText'),
				cancelButtonText: this.$t('cancelText'),
				type: 'warning',
			})
				.then(function() {
					return cancelReleaseScheduling(ids)
				})
				.then(() => {
					this.getList()
					this.msgSuccess(this.$t('deleteSuccess'))
				})
				.catch(function() {})
		},
		/** 发布按钮 */
		release(row, flag) {
			let id = this.form.id
			let status = 4
			let deviceId = this.form.deviceId.toString()
			let devices
			if (this.form.devices.length > 0) {
				devices = JSON.stringify(this.form.devices)
			} else {
				devices = ''
			}
			if (row.id) {
				id = row.id
				deviceId = row.deviceId
				devices = row.devices
			}
			if (devices.length === 0) {
				this.$message.warning(this.$t('terminal.atLeastOnce'))
				return
			}
			if (flag === 2) {
				status = 'restart'
			}
			this.$confirm(this.$t('terminal.enterRelease'), this.$t('tip'), {
				confirmButtonText: this.$t('submitText'),
				cancelButtonText: this.$t('cancelText'),
				type: 'warning',
			})
				.then(function() {
					return editReleaseScheduling({ id, status, deviceId, devices })
				})
				.then(() => {
					this.open = false
					this.msgSuccess(this.$t('terminal.releaseSuccess'))
					this.reset()
					this.getList()
					this.choiceDeviceOpen(id)
				})
				.catch(function() {})
		},
		/** 确定按钮 */
		confirmForm: function() {
			if (this.form.deviceId.length === 0) {
				this.$message.warning(this.$t('terminal.atLeastOnce'))
				return
			}
			const id = this.form.id
			const deviceId = this.form.deviceId.toString()
			let devices
			let status = this.form.status
			if (status === 2) {
				status = 5
			}
			if (this.form.devices.length > 0) {
				devices = JSON.stringify(this.form.devices)
			} else {
				devices = ''
			}
			editReleaseScheduling({ id, status, deviceId, devices }).then(
				(response) => {
					if (response.code === 0) {
						this.open = false
						if (this.editBtn) {
							this.msgSuccess(this.$t('loginLog.changeSuccess'))
						} else {
							this.msgSuccess(this.$t('addSuccess'))
						}
						this.reset()
						this.getList()
					} else {
						this.msgError(response.msg)
					}
				}
			)
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.reset()
		},
		/** 设备列表查看 */
		choiceDeviceOpen(id) {
			this.schedulingId = id
			this.expands = []
			this.downloadList = []
			listDeviceSchedulingChoice({ id: this.schedulingId }).then((res) => {
				this.deviceList = res.data
				this.title = this.$t('equipment.hasClickEquipment')
				this.choiceDeviceFlag = true
			})
		},
		/** 查询分组名称下拉树结构 */
		getGroupTree() {
			groupTree({ deptId: this.deptId, groupId: 43 }).then((response) => {
				this.groupOptions = response.data
				this.groupDict = []
				const findChildren = (arr, list) => {
					for (let i = 0; i < arr.length; i++) {
						if (arr[i].id) {
							list.push(arr[i])
						}
						if (arr[i].children && arr[i].children.length) {
							findChildren(arr[i].children, list)
						}
					}
				}
				findChildren(this.groupOptions, this.groupDict)
			})
		},
		// 节点单击事件
		handleNodeClick(data) {
			this.queryParamsDevice.fullPathId = data.id === 0 ? null : data.id
			this.getDevice()
		},
		// 全选
		handleCheckAllChange(val) {
			const ids = this.deviceList.map((item) => item.id)
			if (val) {
				this.form.deviceId = [...new Set([...this.form.deviceId, ...ids])]
			} else {
				this.form.deviceId = this.form.deviceId.filter((x) => !ids.includes(x))
			}
			console.log(ids, 'ids')
			this.handleCheckedChange(this.form.deviceId)
		},
		// 可选设备选中触发
		handleCheckedChange(row) {
			const devIdList = this.deviceList.map((item) => item.id)
			this.checkAll = devIdList.every((id) => this.form.deviceId.includes(id))

			const idHave = []
			this.deviceList.forEach((element) => {
				let flag = false
				row.forEach((already) => {
					if (already === element.id) {
						flag = true
					}
				})
				if (flag) {
					idHave.push(element)
				}
			})
			this.form.devices.forEach((already) => {
				let flag = true
				this.deviceList.forEach((element) => {
					if (already.id === element.id) {
						flag = false
					}
				})
				if (flag) {
					idHave.push(already)
				}
			})
			this.form.devices = []

			idHave.forEach((element) => {
				console.log(element)
				this.form.devices.push(element)
			})
		},
		// 已选设备选中触发
		handleCheckedAlreadyChange(row) {
			const devIdList = this.deviceList.map((item) => item.id)
			this.checkAll = devIdList.every((id) => this.form.deviceId.includes(id))
      
			const idHave = []

			this.form.devices.forEach((element) => {
				let flag = false
				row.forEach((already) => {
					if (already === element.id) {
						flag = true
					}
				})
				if (flag) {
					idHave.push(element)
				}
			})
			this.form.devices = []
			idHave.forEach((element) => {
				this.form.devices.push(element)
			})
		},
		/** 查询设备列表 */
		getDevice() {
			this.queryParamsDevice.id = this.form.id
			listDeviceScheduling(this.queryParamsDevice).then((response) => {
				this.deviceList = []
				response.data.forEach((element) => {
					const temp = {
						id: element.id,
						name: element.name,
						code: element.code,
						groupId: element.groupId,
						groupName: element.groupName,
						resolution: element.resolution,
						platFlag: element.platFlag,
						status: element.status,
						online: element.online,
					}
					this.deviceList.push(temp)
				})
				console.log('devices', this.form.devices)
				this.handleCheckedChange(
					this.form.devices.map((device) => device.id) || []
				)
			})
		},
		expandChange(row, expandedRows) {
			if (expandedRows.length) {
				this.expands = []
				if (row) {
					this.downloadQueryParams = {
						current: 1,
						size: 1000,
						deviceCode: row.code,
						schedulingId: this.schedulingId,
					}
					this.loading = true
					listDownload(this.downloadQueryParams).then((response) => {
						this.downloadList = response.data
						this.expands.push(row.id)
						this.loading = false
					})
				}
			} else {
				this.expands = []
			}
		},
		handleResend(row) {
			const ids = row.id
			this.$confirm(this.$t('program.enterResetdistri'), this.$t('warning'), {
				confirmButtonText: this.$t('submitText'),
				cancelButtonText: this.$t('cancelText'),
				type: 'warning',
			})
				.then(function() {
					return resend(ids)
				})
				.then(() => {
					if (this.expands.length > 0) {
						listDownload(this.downloadQueryParams).then((response) => {
							this.downloadList = response.data
							this.expands = []
							this.expands.push(this.expands[0])
						})
					}
					this.msgSuccess(this.$t('operationSuccess'))
				})
				.catch(function() {})
		},
		handleResends(row) {
			const ids = []
			this.downloadQueryParams = {
				current: 1,
				size: 1000,
				deviceCode: row.code,
				schedulingId: this.schedulingId,
			}
			listDownload(this.downloadQueryParams).then((response) => {
				if (response.data.length > 0) {
					response.data.forEach((element) => {
						ids.push(element.id)
					})
					this.$confirm(
						this.$t('program.enterResetdistri'),
						this.$t('warning'),
						{
							confirmButtonText: this.$t('submitText'),
							cancelButtonText: this.$t('cancelText'),
							type: 'warning',
						}
					)
						.then(function() {
							return resend(ids)
						})
						.then(() => {
							if (this.expands.length > 0) {
								listDownload(this.downloadQueryParams).then((response) => {
									this.downloadList = response.data
									this.expands = []
									this.expands.push(row.id)
								})
							}
							this.msgSuccess(this.$t('operationSuccess'))
						})
						.catch(function() {})
				}
			})
		},
		/** 下载进度操作 */
		handleProgress(row) {
			console.log(`<<<<2023年03月16日 11:00:07>>>>`, { row: row })
			this.dOpen = true
			this.loadingP = true
			this.dloadId = row.id
			this.deviceCode = row.deviceCode
			this.getResDload()
		},
		getResDload() {
			resDloadList({ dloadId: this.dloadId, deviceCode: this.deviceCode }).then(
				(response) => {
					this.resDloadList = response.data
					this.loadingP = false
				}
			)
		},
		/** 查询可发布频道列表 */
		getSchedulingIdOptions() {
			listScheduling(this.optionsParams).then((response) => {
				this.schedulingIdOptions = response.data
			})
		},
		// 下载状态字典翻译
		statusFormat(row, column) {
			return this.selectDictLabel(this.statusOptions, row.status)
		},
		playWeeksChange(val) {
			if (!val) {
				return val
			}
			return val
				.replace('0', '星期天')
				.replace('1', '星期一')
				.replace('2', '星期二')
				.replace('3', '星期三')
				.replace('4', '星期四')
				.replace('5', '星期五')
				.replace('6', '星期六')
		},
	},
}
</script>

<style lang="scss" scoped>
.app-container {
	.custom-dialog {
		.el-select {
			width: 100%;
		}
	}
}
.box {
	display: flex;
	justify-content: space-between;
	width: 100%;
	.title {
		line-height: 2;
		border-bottom: 1px solid #dddddd;
		font-size: 18px;
		padding: 0 10px;
	}
	.left {
		width: 32.5%;
		border: 1px solid #dddddd;
		border-radius: 5px;
		height: 55vh;
		overflow-y: auto;
		.head-container {
			margin: 5px;
		}
	}
	.right {
		width: 32.5%;
		border-radius: 5px;
		border: 1px solid #dddddd;
		height: 55vh;
		overflow-y: auto;
	}
}
.clear-both::after {
	display: block;
	clear: both;
	content: '';
}
</style>
